<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试通</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 轮播图区域 -->
<div class="slider">
    <div class="slider-wrapper">
        <img src="image1.png" >
        <img src="image2.png">
        <div class="toggle">
            <button class="prev">&lt;</button>
            <button class="next">&gt;</button>
        </div>
    </div>
    <div class="slider-footer">
        <p>面试通</p>
        <ul class="slider-indicator">
            <li class="act"></li>
            <li></li>
        </ul>
    </div>
</div>
<script>
    // 轮播图数据
    const sliderData = [
        { url: "image1.png" },
        { url: "image2.png"}
    ];

    // 当前轮播图索引
    let currentIndex = 0;
    let timerId = null;

    // DOM元素
    const sliderWrapper = document.querySelector('.slider-wrapper');
    const images = document.querySelectorAll('.slider-wrapper img');
    const title = document.querySelector('.slider-footer p');
    const indicators = document.querySelectorAll('.slider-indicator li');
    const prevBtn = document.querySelector('.prev');
    const nextBtn = document.querySelector('.next');
    const slider = document.querySelector('.slider');

    // 初始化轮播图
    function initSlider() {
        updateSlider();
        setupIndicators();
        setupButtons();
        startTimer();

        // 添加鼠标悬停和离开的事件监听器
        slider.addEventListener('mouseenter', stopTimer);
        slider.addEventListener('mouseleave', startTimer);
    }

    // 更新轮播图显示
    function updateSlider() {
        // 隐藏所有图片
        images.forEach(img => {
            img.classList.remove('act');
        });

        // 显示当前图片
        images[currentIndex].classList.add('act');
        title.textContent = sliderData[currentIndex].title;

        // 更新指示器
        indicators.forEach((indicator, index) => {
            indicator.classList.toggle('act', index === currentIndex);
        });
    }

    // 设置指示器点击事件
    function setupIndicators() {
        indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                stopTimer();
                currentIndex = index;
                updateSlider();
                startTimer();
            });
        });
    }

    // 设置按钮点击事件
    function setupButtons() {
        prevBtn.addEventListener('click', () => {
            stopTimer();
            currentIndex = (currentIndex - 1 + sliderData.length) % sliderData.length;
            updateSlider();
            startTimer();
        });

        nextBtn.addEventListener('click', () => {
            stopTimer();
            currentIndex = (currentIndex + 1) % sliderData.length;
            updateSlider();
            startTimer();
        });
    }

    // 开始定时轮播
    function startTimer() {
        // 确保只有一个定时器在运行
        stopTimer();
        timerId = setInterval(() => {
            currentIndex = (currentIndex + 1) % sliderData.length;
            updateSlider();
        }, 2000);
    }

    // 停止定时轮播
    function stopTimer() {
        if (timerId) {
            clearInterval(timerId);
            timerId = null;
        }
    }

    // 初始化轮播图
    initSlider();
</script>
</body>
</html>